<template>
  <div>
    <el-button type="text" icon="el-icon-plus" size="mini" @click="openShop">添加</el-button>
    <el-dialog
      ref="dialog__wrapper"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
      title="配件选择"
      width="70%"
      @close="clear">
      <!-- 查询条件 -->
      <el-form ref="searchForm" :model="search" label-width="90px" size="mini">
        <el-row :gutter="6">
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="partCode" label="配件代码">
              <el-input v-model="search.partCode" placeholder="配件代码" clearable/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="partName" label="配件名称">
              <el-input v-model="search.partName" placeholder="配件名称" clearable/>
            </el-form-item>
          </el-col>
          <div style="text-align:right">
            <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询</el-button>
            <el-button icon="el-icon-refresh" @click="resetForm('searchForm')">重置</el-button>
          </div>
        </el-row>
      </el-form>
      <div class="tableHead">
        <div class="tabletitle">配件信息</div>
      </div>
      <el-table v-loading="load" ref="table" :data="partList" tooltip-effect="dark" border @selection-change="select">
        <el-table-column align="center" label="序号" min-width="50" type="index"/>
        <el-table-column type="selection" min-width="40"/>
        <el-table-column prop="STORAGE_CODE" label="仓库" min-width="70"/>
        <el-table-column prop="STORAGE_AREA_CODE" label="库区" min-width="70"/>
        <el-table-column prop="STORAGE_POSITION_CODE" label="库位" min-width="70"/>
        <el-table-column prop="PART_NO" show-overflow-tooltip label="配件代码" min-width="120"/>
        <el-table-column prop="PART_NAME" show-overflow-tooltip label="配件名称" min-width="150"/>
        <el-table-column prop="STOCK_QUANTITY" label="账面库存" min-width="70"/>
        <el-table-column prop="USABLE_QUANTITY" label="可用库存" min-width="70"/>
        <el-table-column prop="MAX_STOCK" label="最大库存" min-width="70"/>
        <el-table-column prop="MIN_STOCK" label="最小库存" min-width="70"/>
        <!--<el-table-column :formatter="filterCode" prop="PART_TYPE" label="配件类别" type="1300" min-width="70"/>-->
        <el-table-column prop="PRICE" label="单价" min-width="70"/>
        <el-table-column prop="UNIT" label="计量单位" min-width="70"/>
        <!--<el-table-column prop="REMARK" label="备注" min-width="150"/>-->
      </el-table>
      <!-- 分页 -->
      <div style="text-align:right">
        <Pagination :data="page" @change-size="handleSizeChange" @change-page="handleCurrentChange"/>
      </div>
      <div slot="footer" style="text-align:center" class="dialog-footer">
        <el-button type="primary" @click="confirmHandle">确 定</el-button>
        <el-button @click="clear">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { transferPartList } from '@/api/part/dcs/ordermanage/transfers'
import Pagination from '@/components/Pagination'
import formMixins from '@/mixins/formMixins'

export default {
  name: 'SelectTransferPart',
  components: {
    Pagination
  },
  mixins: [formMixins],
  props: {
    orderFormObj: Object
  },
  data() {
    return {
      load: false,
      dialogFormVisible: false,
      multipleSelection: [],
      partList: [],
      page: {},
      search: {
        limit: 5,
        pageNum: 1,
        partCode: '',
        partName: ''
      }
    }
  },
  mounted() {
  },
  methods: {
    openShop() {
      if (this.orderFormObj.storageId === '') {
        this.$message({
          type: 'info',
          message: '请选择调出仓库!'
        })
        return
      }
      this.dialogFormVisible = true
      this.searchHandle()
    },
    // 页面查询
    searchHandle() {
      this.load = true
      this.search.storageId = this.orderFormObj.storageId
      transferPartList(this.search)
        .then(res => {
          this.partList = res.rows
          this.page = res
          this.load = false
        })
        .catch(err => {
          this.load = false
        })
    },
    // 选择分页
    handleSizeChange(size) {
      this.search.limit = size
      this.searchHandle()
    },
    handleCurrentChange(page) {
      this.search.pageNum = page
      this.searchHandle()
    },
    // 选择
    select(val) {
      if (val == null) {
        this.multipleSelection = []
      } else {
        this.multipleSelection = val
      }
    },
    // 确定
    confirmHandle() {
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: 'info',
          message: '请选择数据!'
        })
      } else {
        const dataList = []
        this.multipleSelection.forEach(element => {
          const data = {
            partId: element.PART_ID,
            partNo: element.PART_NO,
            partName: element.PART_NAME,
            unit: element.UNIT,
            unitPrice: element.PRICE,
            storageCode: element.STORAGE_CODE,
            storageAreaCode: element.STORAGE_AREA_CODE,
            storagePositionCode: element.STORAGE_POSITION_CODE,
            usableQuantity: element.USABLE_QUANTITY,
            partStockId: element.PART_STOCK_ID
          }
          dataList.push(data)
        })
        this.$emit('getItemInfo', dataList)
        this.clear()
      }
    },
    // 关闭
    clear() {
      this.search = {
        limit: 5,
        pageNum: 1,
        partCode: '',
        partName: ''
      }
      this.multipleSelection = []
      this.partList = []
      this.dialogFormVisible = false
    }
  }
}
</script>

<style scoped>
</style>
